<template>
  <div class="page">
    <p class="title_tip">
      <span style="color:#FF3B3B">请仔细核对您的身份信息:姓名,身份证号,性别,一经提交不予修改，</span>
      <span>如果信息不符将影响您后续的医保支付</span>
    </p>
    <i-cell-group>
      <i-cell title="姓名" is-link i-class="cell">
        <input placeholder="姓名" v-model="userInfo.patient_name" slot="footer" type="text" disabled />
      </i-cell>
      <i-cell title="身份证号" is-link i-class="cell">
        <input placeholder="身份证号" v-model="userInfo.cert_id" slot="footer" type="idcard" disabled />
      </i-cell>
      <i-cell title="医保卡号" i-class="cell ">
        <input placeholder="医保卡号" v-model="insurance_card" maxlength="9" slot="footer" type="text" />
      </i-cell>
    </i-cell-group>
    <div class="subBtm">
      <button @click="sure">确认并提交</button>
    </div>
    <i-toast id="toast" />
    <div class="modal" v-if="visible">
      <div class="out">
        <div class="top">
          <span>确认信息准确无误？</span>
        </div>
        <div class="btm">
          <span @click="visible=false">取消</span>
          <span @click="sureUpload">确定</span>
        </div>
      </div>
    </div>
    <i-message id="message" />
  </div>
</template>
<script>
import storage from "@/utils/storage";
import api from "@/api/api";
const { $Toast, $Message } = require("../../../../../static/iview/base");
export default {
  data() {
    return {
      visible: false,
      userInfo: {},
      orderId:"",
      insurance_card:"",
      sum:""
    };
  },
  onLoad(options) {
    this.userInfo = this.$storage.getAccountInfo();
    this.visible = false
    this.insurance_card = ''
    this.orderId = options.orderId
    this.sum = options.sum
    console.log("2", this.orderId);
  },
  mounted() {},
  methods: {
    toQua() {
      this.$router.push("/pages/center/child/pay/main");
    },
    sure() {
      if (!this.insurance_card) {
        $Message({
          content: "请填写医保卡号",
          type: "warning"
        });
        return;
      }
      if (this.insurance_card.length !== 9) {
        $Message({
          content: "请填写正确医保卡号",
          type: "warning"
        });
        return;
      }
      this.visible = true;
    },
    sureUpload() {
      var that = this;

      that.$api
        .userInsuranceCardSupplement(
          { insurance_card: this.insurance_card },
          { showLoading: true }
        )
        .then(res => {
          if (res.code == 0) {
            $Message({
              content: "医保卡号添加成功",
              type: "warning"
            });
            that.$router.push(`/pages/center/child/pay/main?orderId=${that.orderId}&sum=${that.sum}&way=2`)
          } else {
            $Message({
              content: "医保卡号添加失败",
              type: "warning"
            });
          }
        });
    }
  }
};
</script>
<style lang='less' scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: #f9f9f9;
  box-sizing: border-box;
}
.title_tip {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  font-size: 26rpx;
  color: rgba(153, 153, 153, 1);
  line-height: 38rpx;
}
.footer {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  .radio {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    margin-right: 30rpx;
  }
  img {
    width: 34rpx;
    height: 34rpx;
    margin: 0 10rpx;
  }
}
.subBtm {
  width: 92%;
  box-sizing: border-box;
  height: 90rpx;
  margin: 30rpx;
  position: absolute;
  bottom: 30rpx;
  button {
    font-size: 34rpx;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    width: 100%;
    background: #3f4ade;
  }
}

input::-webkit-input-placeholder {
  color: #666 !important;
  font-size: 32rpx;
}
/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder {
  color: #666 !important;
  opacity: 1;
  font-size: 32rpx;
}
/* Mozilla Firefox 19+ */
input::-moz-placeholder {
  color: #666 !important;
  opacity: 1;
  font-size: 32rpx;
}
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  z-index: 100;
  .out {
    height: 412rpx;
    border-radius: 15rpx;
    width: 650rpx;
    background: #fff;
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -206rpx;
    margin-left: -325rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top {
      flex: 1;
      padding: 110rpx 48rpx 0 48rpx;
      text-align: center;
      span {
        font-size: 34rpx;
        font-family: PingFangSC-Regular, PingFangSC;
        font-weight: 400;
        line-height: 48rpx;
      }
    }
    .btm {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      font-size: 34rpx;
      font-family: PingFangSC-Regular, PingFangSC;
      font-weight: 400;
      .sure {
        background:#4A64EA;
        color: #fff;
      }
      span {
        flex: 1;
        text-align: center;
      }
      span:nth-child(1) {
        background: #f9f9f9;
      }
      span:nth-child(2) {
        background:#4A64EA;
        color: #fff;
      }
    }
  }
}
</style>